<template>
  <div>
    <div class="btn start" @click="startGame()">开始游戏</div>
    <div class="btn help" @click="beginClickBg(), handleHelp()">帮助</div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations("audio", ["beginBg", "endBg", "beginGameBg", "endGameBg", "beginClickBg"]),
    startGame() {
      this.beginGameBg();
      this.endBg();
      this.beginGameBg();
      this.$router.push("/yi/game");
    },
    handleHelp() {
      this.$toast("敬请期待");
    },
    handlePopState() {
      this.endGameBg();
      this.beginBg();
    },
  },
  mounted() {
    window.addEventListener("popstate", this.handlePopState, false);
  },
};
</script>

<style lang="less" scoped>
.btn {
  width: 200px;
  height: 50px;
  background: #409eff;
  border-radius: 5px;
  color: #fff;
  margin: 60px auto;
  text-align: center;
  line-height: 50px;
  // font-size:20px;
  cursor: pointer;

  &:hover {
    background: #66b1ff;
  }
}

.start {
  margin-top: 240px;
}
</style>
